<template>
  <!-- 头部 -->
  <div class="headz" :class="{ headfixed: isfixed }">
    <!-- 两端对齐 -->
    <van-row type="flex" justify="space-between">
      <van-col>
        <!-- <a href="/"><img style="width: 39px" src="@/assets/Homepage_desktop/Logo.png" alt="" /></a> -->
        <router-link to="/"><img style="width: 39px" src="@/assets/Homepage_desktop/Logo.png" alt="" /></router-link>
      </van-col>
      <van-col style="display: flex; align-items: center">
        <van-icon name="wap-nav" size="34" color="#1d2845" @click="wraptranslation" />
      </van-col>
    </van-row>
  </div>
</template>

<script>
  export default {
    name: "headz",
    data() {
      return {
        isacte: false,
        show: false,
        isfixed: false,
      };
    },
    mounted() {
      window.addEventListener("scroll", this.watchScroll);
    },
    methods: {
      watchScroll() {
        var sctop = document.documentElement.scrollTop || document.body.scrollTop;
        //防抖操作 或者 使用animate.css
        if (sctop > 60) {
          this.isfixed = true;
        } else {
          this.isfixed = false;
        }
      },
      //主要内容往右移动
      wraptranslation() {
        this.$parent.moveright();
      },
      //点击蒙板
      hideoverly() {
        this.$parent.moveleft();
      },
    },
  };

</script>

<style scoped>
  .headz {
    padding: 8px 15px;
    position: absolute;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
  }

  .headfixed {
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.3) !important;
    animation: headscroll 0.3s alternate;
    animation-fill-mode: forwards;
    padding: 8px 15px;
  }

  @keyframes headscroll {
    0% {
      background-color: #f1f7ff;
      z-index: 99;
      opacity: 0.2;
    }

    25% {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #f1f7ff;
      opacity: 0.4;
    }

    50% {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #f1f7ff;
      opacity: 0.7;
    }

    75% {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #fff;
      opacity: 0.8;
    }

    100% {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #fff;
      z-index: 99;
      opacity: 0.9;
    }
  }

  .head_nav_wrap {
    background: red;
    position: fixed;
    top: 0;
    left: -80%;
    height: 100vh;
    width: 80%;
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 120px;
    height: 120px;
    background-color: #fff;
  }

</style>
